<template>
    <el-tabs tab-position="tio" v-model="activeName" type="card" v-loading="loading">
        <el-tab-pane :label="$i18n.t('CUSTOMER_BASIC_INFO')" name="default">
            <!-- 基本信息 -->
            <el-card shadow="hover">
                <div slot="header" class="clearfix">
                    <span>{{ $i18n.t('CUSTOMER_BASIC_INFO') }}</span>
                </div>
                <form-content :data="data.customer_basic" :column-num="2" />
            </el-card>
            <!-- 工作信息 -->
            <el-card shadow="hover" style="margin-top: 20px;">
                <div slot="header" class="clearfix">
                    <span>{{ $i18n.t('WORK_INFO') }}</span>
                </div>
                <form-content :data="data.work_info" :column-num="2" />
            </el-card>
            <!-- 征信信息 -->
            <el-card shadow="hover" style="margin-top: 20px;">
                <div slot="header" class="clearfix">
                    <span>{{ $i18n.t('CUSTOMER_CREDIT_INFO') }}</span>
                </div>
                <form-content :data="data.credit_info" :column-num="2" />
            </el-card>
        </el-tab-pane>
        <!-- 订单信息 -->
        <el-tab-pane :label="$i18n.t('HISTORY_ORDER')" name="order">
            <!-- 表格 -->
            <el-table border style="width: 100%;" :data="data.history_order">
                <el-table-column align="center" prop="order_no" :label="$i18n.t('ORDER_NO')" :min-width="150"></el-table-column>
                <el-table-column align="center" prop="status_text" :label="$i18n.t('ORDER_STATUS')" :min-width="100"></el-table-column>
                <el-table-column align="center" prop="product_name" :label="$i18n.t('PRODUCT_NAME')" :min-width="150"></el-table-column>
                <el-table-column align="center" prop="apply_amount" :label="$i18n.t('APPLY_AMOUNT')" :min-width="100"></el-table-column>
                <el-table-column align="center" prop="apply_term" :label="$i18n.t('APPLY_TERM')" :min-width="100"></el-table-column>
                <el-table-column align="center" prop="apply_time" :label="$i18n.t('APPLY_TIME')" :min-width="150"></el-table-column>
                <el-table-column align="center" prop="due_time" :label="$i18n.t('DUE_TIME')" :min-width="150"></el-table-column>
                <el-table-column align="center" prop="repayment_time" :label="$i18n.t('REPAYMENT_TIME')" :min-width="150"></el-table-column>
                <el-table-column align="center" prop="renewal_num" :label="$i18n.t('RENEWAL_NUM')" :min-width="100"></el-table-column>
            </el-table>
        </el-tab-pane>
        <!-- 照片信息 -->
        <el-tab-pane :label="$i18n.t('PHOTO_INFO')" name="photo">
            <customer-material :images="data.photo_info"></customer-material>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import FormContent from '@/components/FormContent'
    import CustomerMaterial from '@/components/customer/Material'
    import { getCollectionDetail } from '@/api/collection'

    export default {
        name: 'CollectionUserInfo',
        components: { CustomerMaterial, FormContent },
        watch: {
            id () {
                this.loading = true
                getCollectionDetail(this.id, { method: 'UserInfo' }).then(res => {
                    const { result } = res
                    this.data = result
                }).finally(() => {
                    this.loading = false
                })
            }
        },
        data () {
            return {
                id: null,
                activeName: 'default',
                data: {
                    detail: {},
                    customer_basic: [],
                    work_info: [],
                    credit_info: [],
                    history_order: [],
                    photo_info: []
                },
                loading: false
            }
        },
        activated () {
            this.id = this.$route.query.id
        },
        created () {
            this.id = this.$route.query.id
        }
    }
</script>

<style scoped>

</style>
